<template>
  <div class="common-layout">
    <el-config-provider size="small">
      <el-container>
        <el-header height="35px">
          <el-row>
            <el-col :span="20">
              <el-menu
                class="el-menu-demo"
                mode="horizontal"
                :default-active="activeIndex"
                router
              >
                <el-menu-item
                  v-for="item in routerArr"
                  :key="item.path"
                  :index="item.path"
                  :route="item.path"
                >
                  {{ item.meta.title }}
                </el-menu-item>
              </el-menu></el-col
            >
            <!-- <el-col :span="4">中船泛华(西安)科技有限公司</el-col> -->
          </el-row></el-header
        >
        <el-main> <RouterView></RouterView></el-main>
      </el-container>
    </el-config-provider>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { useRoute, useRouter } from "vue-router";

defineOptions({
  name: "PageDesign",
  inheritAttrs: false,
});

let route = useRoute();
let router = useRouter();

let activeIndex = computed(() => {
  return route.path;
});

let routerArr = router.options.routes.filter((item) => !item.hidden);
</script>

<style scoped lang="scss">
.common-layout {
  .el-menu--horizontal {
    height: 35px;
  }
  .el-main {
    padding: 5px;
  }
}
</style>
